import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Switch, Modal, Input, Space, Pagination, Form, Upload } from 'antd'; // 引入 Modal 和 Input 组件
import type { UploadProps } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import './certification1.css';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false); // 控制 Modal 可见性
  const [newBatch, setNewBatch] = useState({
    batchNumber: '',
    batchName: '',
    status: true,
    template: '',
  });

  const handleExport = () => {
    console.log('导出数据');
  };

  const initialDataSource = [
    {
      key: '1',
      templateName: '第一批次',
      templateFile: '模板A',
      createTime: '2024-01-01',
    },
    {
      key: '2',
      templateName: '第二批次',
      templateFile: '模板B',
      createTime: '2024-01-02',
    },
    {
      key: '3',
      templateName: '第三批次',
      templateFile: '模板C',
      createTime: '2024-01-03',
    },
    {
      key: '4',
      templateName: '第四批次',
      templateFile: '模板D',
      createTime: '2024-01-04',
    },
    {
      key: '5',
      templateName: '第五批次',
      templateFile: '模板E',
      createTime: '2024-01-05',
    },
    {
      key: '6',
      templateName: '第六批次',
      templateFile: '模板F',
      createTime: '2024-01-06',
    },
    {
      key: '1',
      templateName: '第一批次',
      templateFile: '模板A',
      createTime: '2024-01-01',
    },
    {
      key: '2',
      templateName: '第二批次',
      templateFile: '模板B',
      createTime: '2024-01-02',
    },
    {
      key: '3',
      templateName: '第三批次',
      templateFile: '模板C',
      createTime: '2024-01-03',
    },
    {
      key: '4',
      templateName: '第四批次',
      templateFile: '模板D',
      createTime: '2024-01-04',
    },
    {
      key: '5',
      templateName: '第五批次',
      templateFile: '模板E',
      createTime: '2024-01-05',
    },
    {
      key: '6',
      templateName: '第六批次',
      templateFile: '模板F',
      createTime: '2024-01-06',
    },
  ];

  const [dataSource, setDataSource] = useState(initialDataSource);

  const handleStatusChange = (key: string) => {
    setDataSource(prevData => prevData.map(item => (item.key === key ? { ...item, status: !item.status } : item)));
  };

  const handelDetail = (key: string) => {
    navigate(`/city/210100/unit/k12/course2/edit/${key}`);
  };

  const columns = [
    {
      title: '模板名称',
      dataIndex: 'templateName',
      key: 'templateName',
    },
    {
      title: '模版文件',
      dataIndex: 'templateFile',
      key: 'templateFile',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Button type="link">查看</Button>
          <Button type="link" color="danger" onClick={() => handelDetail(record.key)}>
            编辑
          </Button>
        </Space>
      ),
    },
  ];

  const handleCreateBatch = () => {
    const newData = {
      key: (dataSource.length + 1).toString(),
      ...newBatch,
      createTime: new Date().toLocaleDateString(),
    };
    setDataSource([...dataSource, newData]);
    setVisible(false);
    setNewBatch({ batchNumber: '', batchName: '', status: true, template: '' });
  };
  // 弹框-------------------
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 6, span: 16 },
  };
  // 确定
  const onFinish = (values: any) => {
    console.log(values);
  };
  // 取消
  const onReset = () => {
    form.resetFields();
    setVisible(false);
  };
  // 文件上传信息
  const uploadProps: UploadProps = {
    name: 'file',
    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        毕业证模板管理
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          margin: '0px 25px',
        }}
      >
        <div className="slectr">
          <div className="selectr" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 20px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ whiteSpace: 'nowrap' }}>模板名称：</div>
              <Input />
            </div>

            <Space>
              <Button type="primary" onClick={handleExport}>
                查询
              </Button>
              <Button onClick={handleExport}>导出</Button>
              <Button type="link">重置</Button>
            </Space>
          </div>
          <div className="ytitle">
            <Button type="primary" onClick={() => setVisible(true)} style={{ margin: '20px 10px' }}>
              添加模板
            </Button>
          </div>
          <div className="menu">
            <Table dataSource={dataSource} columns={columns} pagination={false} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 50px' }}>
              <div style={{ color: '#666666' }}>共 40 条 记 录&emsp;第 1 / 20 页</div>
              <Pagination
                className="zzpc_pagination"
                style={{ margin: '20px 0' }}
                align="center"
                total={initialDataSource.length}
                showSizeChanger
                showQuickJumper
              />
            </div>
          </div>
        </div>
      </Card>

      {/* 弹出窗口 */}
      <Modal title="制证模板编辑" visible={visible} footer={null} onOk={handleCreateBatch} closable={false}>
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} style={{ maxWidth: 600 }}>
          <Form.Item name="模板名称" label="模板名称" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="模板上传" label="模板上传" rules={[{ required: true }]}>
            <Upload {...uploadProps}>
              <Button icon={<UploadOutlined />}>上传模板</Button>
            </Upload>
          </Form.Item>
          <Form.Item name="选择批次" label="选择批次">
            <Select placeholder="请选择">
              <Option value="male">G32*823</Option>
              <Option value="female">G32*832</Option>
              <Option value="other">G32*238</Option>
            </Select>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Space>
              <Button htmlType="button" onClick={onReset}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SchoolInfoAudit;
